// useLazyload.ts文件
 
// 定义自定义指令
const defineDirective = (app: any) => {
    app.directive('lazy', {
      mounted(el: HTMLImageElement, bindings: any) {
        // el表示使用指令的DOM元素
        // 指令的功能：实现图片的懒加载
        // 监听图片是否进入可视区
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          // true；进入可视区域，false：未进入可视区域
          if (isIntersecting) {
            // 给图片的src属性赋值图片的地址
            el.src = bindings.value;
            // 取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
            // eslint-disable-next-line spellcheck/spell-checker
            observer.unobserve(el);
          }
        });
        // 监听dom元素
        observer.observe(el);
      }
    });
  };
  export default {
    install(app: any) {
      // 自定义指令
      defineDirective(app);
    }
}